<template>
	<view class="myPage">
		<common-header :isCanBack="true" titleName="游记详情" :className="headerClassName"></common-header>
		<view class="container">
			<swiper class="detail-banner-swiper">
				<swiper-item v-for="img of info.attachmentList" :key="img.attaId">
					<image class="banner-item" :src="img_baseUrl + img.attaPath" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="details">
				<view class="item_type">
					<text>{{info.typeName}}</text>
				</view>
				<text class="title">{{ info.title }}</text>
				<view class="tit_items">
					<text>{{ info.createTime }}</text>
				</view>
				<view class="locBox_wrap">
					<view class="locBox" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/introduction-detail-position-bg.png)`}" @click="goToMap">
						<view class="locBox_lf">
							<text>{{info.addr?info.addr:""}}</text>
							<view>{{ currDistance }}</view>
						</view>
						<view class="locBox_rt">
							<img :src="`${img_baseUrl}/statics/std/static/introduction-detail-position-location.png`" alt="">
						</view>
					</view>
				</view>
				<view class="discription">
					<mp-html :content="info.content" style="font-size: 28rpx; color: #4d4d4d; line-height: 48rpx; font-weight: 400;"/>
				</view>
			</view>
		</view>
    <action-bar :optionData="info" type='2' viewPath="/page_my/travels/detail"></action-bar>
	</view>
</template>

<script>
	import commonHeader from '@/components/commonHeader.vue';
  import actionBar from '@/components/actionBar.vue';
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
  import {currentPosition, distance} from '@/utils/index.js';
	import {
		requestGet
	} from "@/utils/request";
	export default {
		components: {
			commonHeader,
			mpHtml,
      actionBar
		},
		data() {
			return {
				headerClassName: "",
				info: {},
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
        currDistance: ''
			};
		},
		mounted() {},
		onLoad: function(options) {
			console.log(options, 'options~~~~')
			const id = options.id
			if (id) {
				this.id = id
			}
		},
    onShow(){
      this._getDetail()
    },
		methods: {
			_getDetail() {
				requestGet(`/applet/notes/${this.id}`, {}, "/baseplatform")
					.then((res) => {
						if (res.code === 200) {
              res.data.content = res.data && res.data.content ? res.data.content.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
							this.info = res.data || {};
              this.getDistance();
						}
					})
					.catch((err) => console.log("错误了", err));
			},
			onPageScroll(e) {
				if (e.scrollTop > 100) {
					this.headerClassName = "headerClass";
				} else {
					this.headerClassName = "";
				}
			},
      goToMap(){
        const detail = this.info;
        if(!detail.latitude || !detail.longitude || detail.latitude == "" || detail.longitude == ''){
          uni.showToast({
            title: "暂无具体位置信息",
            icon: "none",
          });
          return 
        }
        uni.openLocation({
        			latitude: Number(detail.latitude),
        			longitude: Number(detail.longitude),
              name: detail.title || '',
              address: detail.addr || '',
        			success: function () {
        				console.log('openLocation=======success',detail);
        			},
              fail: function (res) {
                console.log('openLocation=====fail', res);
              }
        		});
      },
      async getDistance(){
         let myPosition = null;
         try {
           myPosition = await currentPosition();
         } catch (error) {
           console.log('定位失败:', error);
           return
         }
        console.log('myPositon=====', myPosition);
        if(myPosition.latitude && myPosition.longitude && this.info.latitude && this.info.longitude){
          distance(myPosition.latitude, myPosition.longitude,this.info.latitude,this.info.longitude).then(distance => {
            console.log("distance========", distance)
            this.currDistance = Number(distance) > 1000 ? (Number(distance)/1000).toFixed(2) + 'km' : distance + 'm';
          }).catch(err => {
            console.log("distance========err", res)
            this.currDistance = "";
          })
        }
      }
		},
	};
</script>

<style lang="scss" scoped>
	.myPage {
		height: 100%;
		width: 100%;
		position: relative;

		.container {
			// height: 100vh;
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;

			swiper.detail-banner-swiper {
				height: 540rpx;

				image {
					height: 100%;
					width: 100%;
				}

				&::v-deep {
					.wx-swiper-dots {
						width: 100%;
						height: 120rpx;
						background: linear-gradient(180deg,
								rgba(0, 0, 0, 0) 0%,
								rgba(0, 0, 0, 0.16) 100%);
						padding-top: 52rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						bottom: 30rpx;
					}

					.wx-swiper-dot {
						width: 20rpx;
						height: 4rpx;
						margin: 0 6rpx;
						background: rgba(255, 255, 255, 0.6);
						border-radius: 10rpx;
						opacity: 1;

						&.wx-swiper-dot-active {
							background: #ffffff;
							opacity: 1;
						}
					}
				}
			}

			.top-img {
				height: 720rpx;
				width: 100%;
			}

			.details {
				position: relative;
				top: -40rpx;
				height: auto;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				padding: 40rpx;

				.item_type {
					text {
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
            color: #3FAA73;
						background-color: #F3F6F5;
					}
				}

				.title {
					display: inline-block;
					font-size: 48rpx;
					font-weight: 700;
					color: rgba(0, 0, 0, 0.8);
					line-height: 68rpx;
					margin: 48rpx 0 12rpx;
				}

				.tit_items {
					margin-bottom: 48rpx;

					text {
						box-sizing: border-box;
						height: 40rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.5);
						margin-top: 12rpx;
					}
				}

				.position {
					width: 670rpx;
					height: 120rpx;
					background: url(https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: center;
						margin-left: 24rpx;

						text:first-child {
							font-size: 32rpx;
							font-weight: 700;
							color: #5F6F86;
							line-height: 48rpx;
							margin-bottom: 8rpx;
						}

						text:last-child {
							font-size: 24rpx;
							font-weight: 400;
							color: #777F8F;
							line-height: 32rpx;
						}
					}

					.right {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-right: 32rpx;
						width: 144rpx;
						height: 64rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
						border-radius: 32rpx 32rpx 32rpx 32rpx;

						image {
							height: 32rpx;
							width: 32rpx;
							margin-right: 8rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #2187FF;
							line-height: 32rpx;
						}
					}
				}

				.discription {
					width: 100%;
					height: auto;
					margin: 48rpx 0 0;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.7);
					line-height: 48rpx;
				}

				.btns {
					position: fixed;
					bottom: 40rpx;
					right: 40rpx;
					width: 264rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					padding-left: 32rpx;
					padding-right: 32rpx;
					padding-top: 16rpx;
					border-radius: 45rpx;
					box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149,157,165,0.2);


					.btn_rt {
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 64rpx;
							height: 64rpx;
						}
					}
				}

				.locBox_wrap {
					width: 100%;
					display: flex;

					.locBox {
						width: calc(100% - 0rpx);
						height: 120rpx;
						border-radius: 24rpx;
						// background: url('https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png');
						background-size: cover;
						display: flex;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;
						padding: 20rpx 24rpx 16rpx;

						.locBox_lf {
							margin-right: 20rpx;
							flex: 1;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;

							text {
								font-size: 28rpx;
								font-weight: 500;
								color: #5F6F86;
								line-height: 44rpx
							}

							view {
								font-size: 24rpx;
								font-weight: 400;
								color: #777F8F;
								line-height: 40rpx;
							}
						}

						.locBox_rt {
							width: 64rpx;
							height: 64rpx;
							background: #FFFFFF;
							border-radius: 36rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 32rpx;
								height: 32rpx;
								display: block;
							}

							text {
								font-size: 28rpx;
								font-weight: 400;
								color: #2187FF;
								line-height: 32rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
